<template>
    <div class="assetright-content">
        <div class="title">
            <h3>资产使用率<span>Asset usage</span></h3>
        </div>
        <div id="myChart" class="myChart"></div>
        <div class="myChartInfo">
            <div class="myChartInfo-left">
                <span>{{ useData.count }}</span>
                <p>总资产数量</p>
            </div>
            <div class="myChartInfo-right">
                <span>{{ useData.uall }}</span>
                <p>资产使用数量</p>
            </div>
        </div>
        <div class="title">
            <h3>外出资产占比<span>Out of office asset</span></h3>
        </div>
        <div id="myChart1" class="myChart"></div>
        <div class="myChartInfo">
            <div class="myChartInfo-left">
                <span>{{ outData.count }}</span>
                <p>总资产数量</p>
            </div>
            <div class="myChartInfo-right">
                <span>{{ outData.foreignCount }}</span>
                <p>外出资产数量</p>
            </div>
        </div>
        <!-- <div id="main" style="width: 300px; height: 350px"></div> -->
    </div>
</template>

<script>
export default {
    data() {
        return {
            useData: [], //使用率
            outData: [], //外出率
        }
    },
    methods: {
        usePieChart(value) {
            let myChart = this.$echarts.init(document.getElementById('myChart'))
            var value = value
            var data = [value]
            var option = {
                graphic: [
                    {
                        type: 'group',
                        left: 'center',
                        top: '60%',
                        children: [
                            {
                                type: 'text',
                                z: 100,
                                left: '10',
                                top: 'middle',
                                style: {
                                    fill: '#fff',
                                    text: '资产使用率',
                                    font: '10px Microsoft YaHei',
                                },
                            },
                        ],
                    },
                ],
                series: [
                    {
                        type: 'liquidFill',
                        radius: '60%',
                        center: ['50%', '50%'],
                        color: [
                            {
                                type: 'linear',
                                x: 0,
                                y: 1,
                                x2: 0,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: ['rgba(95,122,190, 0.9)'], // 0% 处的颜色
                                    },
                                    {
                                        offset: 0,
                                        color: ['rgba(95,122,190, 1)'], // 100% 处的颜色
                                    },
                                ],
                                global: false, // 缺省为 false
                            },
                        ],
                        data: data,
                        backgroundStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [
                                    {
                                        offset: 1,
                                        color: 'rgba(95,122,190, 0.5)',
                                    },
                                    {
                                        offset: 0.5,
                                        color: 'rgba(95,122,190, 0.7)',
                                    },
                                    {
                                        offset: 0,
                                        color: 'rgba(95,122,190, 0.9)',
                                    },
                                ],
                                globalCoord: false,
                            },
                        },
                        outline: {
                            borderDistance: 0,
                            itemStyle: {
                                borderWidth: 5,
                                borderColor: {
                                    type: 'linear',
                                    x: 0,
                                    y: 0,
                                    x2: 0,
                                    y2: 1,
                                    colorStops: [
                                        {
                                            offset: 0,
                                            color: 'rgba(95,122,190, 0.2)',
                                        },
                                        {
                                            offset: 0.5,
                                            color: 'rgba(95,122,190, 0.5)',
                                        },
                                        {
                                            offset: 1,
                                            color: 'rgba(95,122,190, 0.9)',
                                        },
                                    ],
                                    globalCoord: false,
                                },
                                shadowBlur: 10,
                                shadowColor: '#000',
                            },
                        },
                        label: {
                            normal: {
                                color: '#fff',
                                insideColor: '#7ffafd',
                                fontSize: 22,
                            },
                        },
                    },
                ],
            }
            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
        outPieChart(value) {
            let myChart = this.$echarts.init(document.getElementById('myChart1'))
            var value = value
            var data = [value]
            let option = {
                title: {
                    text: '外出资产占比',
                    textStyle: {
                        color: '#fff',
                        fontSize: 10,
                        fontWeight: 'normal',
                        fontFamily: 'Microsoft YaHei',
                    },
                    left: 'center',
                    bottom: '32%',
                },
                tooltip: {
                    show: false,
                },
                legend: {},
                series: [
                    {
                        name: '内圈',
                        type: 'pie',
                        hoverAnimation: false,
                        radius: [0, '60%'],
                        z: 2,
                        label: {
                            normal: {
                                show: true,
                                position: 'center',
                                color: '#fff',
                                formatter: value + '%',
                                fontSize: 22,
                                fontWeight: 'bold',
                            },
                        },
                        data: [
                            {
                                value: data,
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(95,122,190, 0.5)',
                                    },
                                },
                            },
                        ],
                    },

                    {
                        name: '数据',
                        type: 'pie',
                        radius: ['45%', '63%'],
                        legendHoverLink: false,
                        hoverAnimation: false,
                        avoidLabelOverlap: false,
                        z: 3,
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '30',
                                    fontWeight: 'bold',
                                },
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: data,
                                itemStyle: {
                                    normal: {
                                        // shadowBlur: 2,
                                        // shadowColor: '#000',
                                        color: '#7ffafd',
                                    },
                                },
                            },
                            {
                                value: 100 - data,
                                itemStyle: {
                                    normal: {
                                        // shadowBlur: 2,
                                        // shadowColor: '#333',
                                        borderWidth: 1, //设置边框粗细
                                        borderColor: 'rgba(0,0,0,0.1)', //边框颜色
                                        color: 'rgba(95,122,190, 0.9)',
                                    },
                                },
                            },
                        ],
                    },

                    {
                        name: '外圈',
                        type: 'pie',
                        hoverAnimation: false,
                        radius: ['60%', '68%'],
                        z: 1,
                        label: {
                            normal: {
                                show: false,
                                position: 'center',
                            },
                            emphasis: {
                                show: true,
                                textStyle: {
                                    fontSize: '10',
                                    fontWeight: 'bold',
                                },
                            },
                        },
                        labelLine: {
                            normal: {
                                show: false,
                            },
                        },
                        data: [
                            {
                                value: data,
                                itemStyle: {
                                    normal: {
                                        color: 'rgba(95,122,190, 0.7)',
                                    },
                                },
                            },
                            {
                                value: 100 - data,
                                itemStyle: {
                                    normal: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowOffsetY: 0,
                                        shadowColor: 'rgba(0,0,0,0.7)',
                                        color: 'rgba(95,122,190, 0.7)',
                                    },
                                },
                            },
                        ],
                    },
                ],
            }
            myChart.setOption(option)
            window.addEventListener('resize', function () {
                myChart.resize()
            })
        },
        // twoChart() {
        //     function arrayChunk(array, size) {
        //         let data = []
        //         for (let i = 0; i < array.length; i += size) {
        //             data.push(array.slice(i, i + size))
        //         }
        //         return data
        //     }
        //     //声明数组
        //     var obj = {
        //         title: '各区县完成比例',
        //         data: ['学校1', '学校2', '学校3', '学校4', '学校5', '学校6', '学校7'],
        //         dataSource: [3.13, 6, 0.3, 5, 3, 5, 3],
        //     }
        //     //分页数字
        //     const Pages = []
        //     var options = []
        //     var yAxisArr = arrayChunk(obj.data, 3)
        //     var seriesArr = arrayChunk(obj.dataSource, 3)
        //     for (var j = 0; j < yAxisArr.length; j++) {
        //         Pages.push(j + 1)
        //     }
        //     for (var index = 0; index < Pages.length; index++) {
        //         let yAxis = {}
        //         let series = {}
        //         let title = {}
        //         let tooltip = {}
        //         let legend = {}
        //         let grid = {}
        //         let xAxis = {}
        //         let color = '#318EFD'
        //         if (index == 0) {
        //             title.text = '测试2'
        //             tooltip.trigger = 'axis'
        //             legend.data = 'GDP'
        //             grid.y2 = 80
        //             color = color

        //             //柱子横向
        //             // xAxis.type = 'value'
        //             // xAxis.name = '%'
        //             // xAxis.boundaryGap = [0, 0.01]
        //             // yAxis.type="category"
        //             // yAxis.data = yAxisArr[index]

        //             //柱子纵向
        //             yAxis.type = 'value'
        //             yAxis.name = '%'
        //             yAxis.boundaryGap = [0, 0.01]
        //             xAxis.type = 'category'
        //             xAxis.data = yAxisArr[index]

        //             series.data = seriesArr[index]
        //             series.name = '完成率'
        //             series.type = 'bar'
        //             series.barWidth = 30
        //         } else {
        //             yAxis.data = yAxisArr[index]
        //             series.data = seriesArr[index]
        //         }
        //         options.push({
        //             yAxis: yAxis,
        //             series: series,
        //             title: title,
        //             tooltip: tooltip,
        //             legend: legend,
        //             grid: grid,
        //             xAxis: xAxis,
        //             color: color,
        //         })
        //     }
        //     // console.log(yAxisArr)
        //     var num = 0
        //     // 基于准备好的dom，初始化echarts实例
        //     // var myChart = echarts.init(document.getElementById('main'))
        //     let myChart = this.$echarts.init(document.getElementById('main'))
        //     // 指定图表的配置项和数据
        //     var option = {
        //         timeline: {
        //             data: Pages,
        //             axisType: 'category',
        //             realtime: true,
        //             label: {
        //                 formatter: function (s) {
        //                     return s
        //                 },
        //             },
        //             symbolSize: 14,
        //             autoPlay: false,
        //             playInterval: 1000,
        //             tooltip: {
        //                 formatter: function (s) {
        //                     num = s.dataIndex
        //                     return s.dataIndex + 1
        //                 },
        //             },
        //         },
        //         options: options,
        //     }

        //     // 使用刚指定的配置项和数据显示图表。
        //     myChart.setOption(option)
        // },

        //刷新页面数据
        // timer() {
        //     return setTimeout(() => {
        //         this.getInfo()
        //     }, 1000)
        // },
        getInfo() {
            this.axios.get('/assets/getAssetsRate').then((result) => {
                this.useData = result.result
                // console.log(this.useData)
                this.usePieChart(this.useData.userRate / 100)
            })
            this.axios.get('/assets/getForeignAssetsPercentage').then((result) => {
                this.outData = result.result
                // console.log(this.outData)
                var value = this.outData.rate
                this.outPieChart(value)
            })
        },
    },
    created() {
        this.getInfo()
    },
    mounted() {
        this.usePieChart()
        this.outPieChart()
        // this.twoChart() //测试分页图表
    },
    destroyed() {
        clearTimeout(this.timer)
    },
}
</script>

<style lang="less" scoped>
@import '../../../assets/less/school.less';
.assetright-content {
    width: 350px;
    height: 100%;
    margin-top: 10px;
    padding-right: 15px;
    .myChart {
        width: 100%;
        height: 200px;
    }
    .myChartInfo {
        width: 100%;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        margin-top: -25px;
        margin-bottom: 25px;
        .myChartInfo-left {
            text-align: center;
            span {
                font-size: 16px;
                color: #fff;
                font-weight: 600;
            }
            p {
                font-size: 12px;
                color: #fff;
            }
        }
        .myChartInfo-right {
            text-align: center;
            span {
                font-size: 16px;
                color: #fff;
                font-weight: 600;
            }
            p {
                font-size: 12px;
                color: #fff;
            }
        }
    }
}
</style>